<template>
  <div>
    <div id="box">
      <!-- 最顶端部分 -->
      <v-header title="商品列表" :back="true"></v-header>
      <!-- 导航部分 -->
      <div id="daohang">
        <div class="top1">
          <input
            type="text"
            class="iconfont"
            placeholder="&#xe610; 按内容搜索"
          />
        </div>
        <div class="bottom1">
          <nav
            :style="{
              background:
                'url(' +
                require('../../assets/images/line.jpg') +
                ')no-repeat right top',
            }"
          >
            <a href="#" class="a1">综合推荐</a>
            <a href="#">销量</a>
            <a href="#">价格</a>
            <a href="#">好评度</a>
            <a href="#">店铺</a>
          </nav>
          <p>
            <span class="iconfont">&#xe623; 筛选</span>
          </p>
        </div>
      </div>
      <!-- 无数据操作 -->
        <div v-if="arr.length===0">
            <p class="myp">暂无数据~~去逛逛吧~~</p>
        </div>
      <!-- 内容部分 -->
      <div id="neirong">
        <ul>
          <li v-for="item in arr" :key="item.id" @click="spxq(item.id)">
            <img :src="'http://localhost:3000'+item.img" alt="" />
            <div class="pp">
              <p class="p1">{{item.goodsname}}</p>
              <p class="p3">
                <em>￥</em><span>{{item.price}}</span><del>￥{{item.market_price}}</del><i>999人已付款</i>
              </p>
              <span class="p4">11.11限时299元起</span>
              <p class="p5"><span>999条评论</span><em>99%好评</em></p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      arr: [],
    };
  },
  mounted() {
    axios({
      url: "/api/getgoodlist",
      method: "get",
      params: {
        cateid: this.$route.query.id,
        type: 1,
      },
    }).then((res) => {
      this.arr = res.data.list.goodData ? res.data.list.goodData : [];
    });
  },
  methods:{
      spxq(id){
          this.$router.push("/spxq/"+id)   
      }
  }
};
</script>

<style scoped>
/* 暂无数据样式 */
.myp{
    text-align: center;
    font-size: .4rem;
    margin-top: 3rem;
}
/* 导航部分*/
#daohang {
  background: linear-gradient(#ff6040, #ff8273);
  height: 1.5rem;
}
#daohang .top1 {
  display: flex;
  height: 0.66rem;
  align-items: center;
  color: #fff;
  margin-bottom: 0.12rem;
}
#daohang .top1 input {
  width: 6.8rem;
  height: 0.6rem;
  border: 0.02rem solid #e8e0df;
  border-radius: 0.1rem;
  padding-left: 0.22rem;
  margin-left: 0.2rem;
}
#daohang .top1 input::placeholder {
  color: #999;
  font-size: 0.26rem;
}
#daohang .bottom1 {
  display: flex;
  height: 0.62rem;
  font-size: 0.26rem;
}
#daohang .bottom1 nav {
  display: flex;
  justify-content: space-around;
  width: 6.2rem;
  height: 0.62rem;
  line-height: 0.62rem;
  /* background: url(../images/line.jpg) no-repeat right top; */
}
#daohang .bottom1 nav a {
  line-height: 0.62rem;
  text-align: center;
  color: #fff;
  font-size: 0.26rem;
}
#daohang .bottom1 nav a.a1 {
  font-size: 0.3rem;
  font-weight: bold;
  position: relative;
}
#daohang .bottom1 nav a:nth-child(1) {
  margin-left: 0.2rem;
}
#daohang .bottom1 nav a:nth-child(6) {
  margin-right: 0.16rem;
}
#daohang .bottom1 p {
  width: 1.3rem;
  text-align: center;
  height: 0.62rem;
  line-height: 0.62rem;
  color: #fff;
}
#daohang .bottom1 p span {
  font-size: 0.28rem;
}
/*内容部分*/
#neirong {
  width: 7.1rem;
  margin: auto;
  margin-top: 0.35rem;
  flex: 1;
  overflow: auto;
}
#neirong ul li {
  display: flex;
  justify-content: space-between;
  height: 3rem;
}
#neirong ul li img {
  width: 2.16rem;
  height: 2.18rem;
}
#neirong ul li .pp {
  width: 4.5rem;
  height: 2.18rem;
}
#neirong ul li .pp .p1 {
  font-size: 0.3rem;
  color: #333;
  width: 4.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#neirong ul li .pp .p2 {
  font-size: 0.26rem;
  color: #9b9b9b;
  width: 4.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#neirong ul li .pp .p3 {
  margin-top: 0.15rem;
  margin-bottom: 0.1rem;
}
#neirong ul li .pp .p3 em {
  font-size: 0.12rem;
  color: #ff6040;
}
#neirong ul li .pp .p3 span {
  font-size: 0.32rem;
  color: #ff6040;
  font-weight: bold;
  margin-right: 0.1rem;
}
#neirong ul li .pp .p3 del {
  font-size: 0.12rem;
  color: #999999;
  margin-right: 0.2rem;
}
#neirong ul li .pp .p3 i {
  font-size: 0.14rem;
  color: #b2b2b2;
}
#neirong ul li .pp .p4 {
  background: #ff8066;
  color: #ffe3dd;
  padding: 0.06rem;
}
#neirong ul li .pp .p5 {
  font-size: 0.18rem;
  color: #9b9b9b;
  margin-top: 0.2rem;
}
#neirong ul li .pp .p5 span {
  margin-right: 0.2rem;
}
</style>